<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- v-if -->
    <div id="app">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
            <h1>条件渲染</h1>
            <p>Wang</p>
            <p>Xiao</p>
        </template>
    </div>

    <!-- v-if-else -->
    <div id="app2">
        <div v-if="Math.random() > 0.5">
            Sorry
        </div>
        <div v-else>
            Not sorry
        </div>
    </div>

    <!-- v-if-eles-if -->
    <div id="app3">
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else>Not A/B/C</div>
    </div>

    <!-- v-show -->
    <div id="app4">
        <h1 v-show="ok">hello!</h1>
    </div>

    <!-- 用key管理可复用的元素 -->
    <template v-if="loginType === username">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter you email address">
    </template>
</body>
<script src="./vue.js"></script>
<script src="js.js"></script>
</html>